<template>
    <div style="padding-top: 20px">
        <el-row :gutter="20">
            <el-col :span="5"><div class="grid-content"></div></el-col>
            <el-col :span="14">
                <div class="grid-content bg-purple">
                    <el-card class="box-card">
                        <div style="float: left;width: auto;height: auto">
                            <div v-for="item in friends" :key="item" class="text item">
                                <div  style="float: left">
                                    <img v-bind:src="item.headImages" style="width: 52px;height: 52px">
                                </div>
                                <div class="style-font" style="float: left;padding-left: 9px">
                                    <span >{{item.name}}</span>
                                    <br><br>
                                    <span>{{item.time}}</span>
                                </div>
                                <br><br><br>
                                <div style="float: left">
                                    {{item.content}}
                                </div>
                                <br>
                                <div>
                                    <img v-bind:src="item.images" style="width: 200px;height: 150px">
                                </div>
                                <br>
                                <div>
                                    <span>{{item.comment}}</span>
                                </div>
                                <div style="padding-left: 300px">
                                    <div><i class="el-icon-thumb">点赞</i>&nbsp;&nbsp;<i class="el-icon-chat-line-square">评论</i>&nbsp;&nbsp;<i class="el-icon-share">转发</i></div>
                                </div>
                                <hr class="hr">
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="5"><div class="grid-content"></div></el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "MyFriends",
        data(){
            return{
                friends:[
                    {
                        name:'朴树',
                        headImages:'http://n.sinaimg.cn/sinacn10/267/w640h427/20181112/33d9-hnstwwq8993772.jpg',
                        time:'11:20',
                        content:'我曾经跨过山和大海，也穿过人山人海',
                        images:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577358117500&di=98dd5b116b08ab66c99c28a7575a5803&imgtype=0&src=http%3A%2F%2Fp0.qhimgs4.com%2Ft01e90822e074c8a481.jpg',
                    },
                    {
                        name:'许巍',
                        headImages:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575812564982&di=d0efd7209a53070ca23fe525a73c4da3&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn09%2F40%2Fw480h360%2F20180824%2F358b-hicsiaw0966162.jpg',
                        time:'11：12',
                        content:'天马行空的生涯,你的心了无牵挂',
                        images:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576407281&di=3870eddee949bde9fede31fd022aa67c&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.mingwumusic.com%2Fimages%2Fupload%2FImage%2F30055660.jpg',
                    },
                    {
                        name:'汪峰',
                        headImages:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575812659904&di=b8dc8f7d13a9c6b3221f9c63ec183622&imgtype=0&src=http%3A%2F%2Fimg01.cztv.com%2F201407%2F10%2F1c11e967930ce1cb7011375e8c6f07dc.jpg',
                        time:'11:10',
                        content:'今天子怡好漂亮,祝老婆生日快乐',
                        images:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575812843658&di=3e337eef175f59820565916d6f22ab3e&imgtype=0&src=http%3A%2F%2Fimg.mp.sohu.com%2Fupload%2F20170816%2F911483633391434f8d7fd06b3f422d6c_th.png',
                    },
                    {
                        name:'泰勒斯威夫特',
                        headImages:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575812975490&di=3eac8abd9fca035308f780d9981f1045&imgtype=0&src=http%3A%2F%2F8.pic.9ht.com%2Fthumb%2Fup%2F2017-11%2F20171113142937007100_600_566.jpg',
                        time:'11:00',
                        content:'今天我是最美的,你们谁也别和我争',
                        images:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575813016220&di=5a98b752bf068e5889a59222e6996099&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1002864212%2C808089859%26fm%3D214%26gp%3D0.jpg',
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .style-font{
        color: lightslategray;
    }
    .hr{
        height: 1px;
        background-color: #ddd;
        border: none;
    }
</style>
